```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nginx反向代理与负载均衡配置指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
            color: #222;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }
        .code-block {
            background-color: #2d3748;
            border-radius: 0.5rem;
            position: relative;
        }
        .code-block::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, #4f46e5, #7c3aed);
            border-radius: 0.5rem 0 0 0.5rem;
        }
        .hover-scale {
            transition: transform 0.3s ease;
        }
        .hover-scale:hover {
            transform: translateY(-5px);
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #4f46e5;
            transition: width 0.3s ease;
        }
        .nav-link:hover::after {
            width: 100%;
        }
        .section-divider {
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(79, 70, 229, 0.5), transparent);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <div class="text-xl font-bold text-indigo-600">
                        <i class="fas fa-server mr-2"></i>Nginx指南
                    </div>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#request-header" class="relative nav-link text-gray-700 hover:text-indigo-600 px-1 py-2">请求头处理</a>
                    <a href="#request-body" class="relative nav-link text-gray-700 hover:text-indigo-600 px-1 py-2">请求体处理</a>
                    <a href="#load-balancing" class="relative nav-link text-gray-700 hover:text-indigo-600 px-1 py-2">负载均衡</a>
                    <a href="#websocket" class="relative nav-link text-gray-700 hover:text-indigo-600 px-1 py-2">WebSocket</a>
                </div>
                <div class="md:hidden flex items-center">
                    <button class="text-gray-500 hover:text-indigo-600 focus:outline-none">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero模块 -->
    <header class="hero-gradient text-white py-20">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Nginx反向代理与负载均衡</h1>
                    <p class="text-xl text-indigo-100 mb-8">精通请求头、请求体处理与WebSocket配置</p>
                    <div class="flex space-x-4">
                        <a href="#request-header" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-indigo-50 transition duration-300 shadow-md hover:shadow-lg">
                            <i class="fas fa-book-open mr-2"></i>开始学习
                        </a>
                        <a href="#mermaid-chart" class="bg-indigo-700 bg-opacity-70 text-white px-6 py-3 rounded-lg font-medium hover:bg-opacity-90 transition duration-300 shadow-md hover:shadow-lg">
                            <i class="fas fa-project-diagram mr-2"></i>查看图表
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nginx/nginx-original.svg" alt="Nginx Logo" class="w-64 h-64 opacity-90">
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <!-- 简介部分 -->
        <section class="mb-20">
            <div class="bg-white rounded-xl shadow-lg p-8 hover-scale">
                <h2 class="text-2xl font-bold mb-4 text-indigo-600 flex items-center">
                    <i class="fas fa-info-circle mr-3"></i>核心概念
                </h2>
                <p class="text-gray-700 mb-6">在Nginx中处理反向代理和负载均衡的请求头和请求体涉及配置请求头的转发、自定义请求头的设置、请求体大小限制等。Nginx能够处理这些操作，以确保请求能够正确地传递到后端服务器并得到合适的响应。</p>
                <p class="text-gray-700">通过配置<code class="bg-gray-100 px-2 py-1 rounded text-indigo-600">proxy_set_header</code>指令，设置请求头，调整请求体大小，以及处理WebSocket连接，可以满足各种应用场景的需求。</p>
            </div>
        </section>

        <!-- 请求头处理部分 -->
        <section id="request-header" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                    <i class="fas fa-heading text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">1. 请求头处理</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <!-- 转发请求头 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-indigo-600 flex items-center">
                            <i class="fas fa-exchange-alt mr-2"></i>1.1 转发请求头
                        </h3>
                        <p class="text-gray-700 mb-4">Nginx在反向代理和负载均衡时，可以使用<code class="bg-gray-100 px-1 py-0.5 rounded text-indigo-600">proxy_set_header</code>指令来设置或修改传递给后端服务器的请求头。</p>
                        
                        <div class="code-block p-4 text-gray-200 mt-4">
                            <pre class="overflow-x-auto"><code>location / {
    proxy_pass http://backend;

    # 设置传递给后端服务器的请求头
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}</code></pre>
                        </div>
                        
                        <div class="mt-4 bg-indigo-50 p-4 rounded-lg">
                            <h4 class="font-medium text-indigo-700 mb-2 flex items-center">
                                <i class="fas fa-lightbulb mr-2"></i>关键说明
                            </h4>
                            <ul class="text-gray-700 space-y-1">
                                <li><span class="font-medium">Host</span>: 转发原始请求的主机名</li>
                                <li><span class="font-medium">X-Real-IP</span>: 客户端的真实IP地址</li>
                                <li><span class="font-medium">X-Forwarded-For</span>: 客户端IP地址链</li>
                                <li><span class="font-medium">X-Forwarded-Proto</span>: 请求使用的协议</li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <!-- 添加自定义请求头 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-indigo-600 flex items-center">
                            <i class="fas fa-plus-circle mr-2"></i>1.2 添加自定义请求头
                        </h3>
                        <p class="text-gray-700 mb-4">可以使用<code class="bg-gray-100 px-1 py-0.5 rounded text-indigo-600">proxy_set_header</code>指令添加自定义请求头。</p>
                        
                        <div class="code-block p-4 text-gray-200 mt-4">
                            <pre class="overflow-x-auto"><code>location / {
    proxy_pass http://backend;
    proxy_set_header X-Custom-Header "MyValue";
}</code></pre>
                        </div>
                        
                        <div class="mt-4 bg-blue-50 p-4 rounded-lg">
                            <h4 class="font-medium text-blue-700 mb-2 flex items-center">
                                <i class="fas fa-exclamation-circle mr-2"></i>注意事项
                            </h4>
                            <p class="text-gray-700">自定义请求头可以用于传递额外的元数据或配置信息给后端服务，常用于A/B测试、功能开关等场景。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="section-divider my-12"></div>

        <!-- 请求体处理部分 -->
        <section id="request-body" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
                    <i class="fas fa-file-upload text-blue-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">2. 请求体处理</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <!-- 处理POST请求体 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-blue-600 flex items-center">
                            <i class="fas fa-paper-plane mr-2"></i>2.1 处理POST请求的请求体
                        </h3>
                        <p class="text-gray-700 mb-4">Nginx作为反向代理服务器，会将客户端请求的请求体转发给后端服务器。默认情况下，Nginx不会对请求体进行处理或修改。</p>
                        
                        <div class="code-block p-4 text-gray-200 mt-4">
                            <pre class="overflow-x-auto"><code>location /api {
    proxy_pass http://backend;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}</code></pre>
                        </div>
                    </div>
                </div>
                
                <!-- 配置请求体大小限制 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-4 text-blue-600 flex items-center">
                            <i class="fas fa-weight-hanging mr-2"></i>2.2 配置请求体大小限制
                        </h3>
                        <p class="text-gray-700 mb-4">Nginx可以通过<code class="bg-gray-100 px-1 py-0.5 rounded text-blue-600">client_max_body_size</code>指令设置请求体的最大大小。</p>
                        
                        <div class="code-block p-4 text-gray-200 mt-4">
                            <pre class="overflow-x-auto"><code>http {
    client_max_body_size 10m; # 限制请求体大小为10MB

    server {
        listen 80;
        server_name demo.com;

        location / {
            proxy_pass http://backend;
        }
    }
}</code></pre>
                        </div>
                        
                        <div class="mt-4 bg-yellow-50 p-4 rounded-lg">
                            <h4 class="font-medium text-yellow-700 mb-2 flex items-center">
                                <i class="fas fa-exclamation-triangle mr-2"></i>重要提示
                            </h4>
                            <p class="text-gray-700">对于文件上传等场景，确保此值设置足够大以避免413错误。同时也要考虑后端服务的处理能力。</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="section-divider my-12"></div>

        <!-- 负载均衡部分 -->
        <section id="load-balancing" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
                    <i class="fas fa-balance-scale text-purple-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">3. 负载均衡中的请求头处理</h2>
            </div>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale">
                <div class="p-6">
                    <h3 class="text-xl font-semibold mb-4 text-purple-600 flex items-center">
                        <i class="fas fa-cog mr-2"></i>3.1 配置负载均衡时的请求头
                    </h3>
                    <p class="text-gray-700 mb-4">在负载均衡的配置中，可以针对不同的负载均衡算法和策略，处理请求头的转发。</p>
                    
                    <div class="code-block p-4 text-gray-200">
                        <pre class="overflow-x-auto"><code>http {
    upstream backend {
        server backend1.demo.com;
        server backend2.demo.com;
    }

    server {
        listen 80;
        server_name demo.com;

        location / {
            proxy_pass http://backend;

            # 设置请求头
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
}</code></pre>
                    </div>
                    
                    <div class="mt-6 grid md:grid-cols-3 gap-4">
                        <div class="bg-purple-50 p-4 rounded-lg">
                            <h4 class="font-medium text-purple-700 mb-2 flex items-center">
                                <i class="fas fa-sync-alt mr-2"></i>轮询算法
                            </h4>
                            <p class="text-gray-700">默认方式，请求按时间顺序分配到不同服务器</p>
                        </div>
                        <div class="bg-purple-50 p-4 rounded-lg">
                            <h4 class="font-medium text-purple-700 mb-2 flex items-center">
                                <i class="fas fa-random mr-2"></i>IP哈希
                            </h4>
                            <p class="text-gray-700">基于客户端IP分配请求，确保同一客户端请求到同一服务器</p>
                        </div>
                        <div class="bg-purple-50 p-4 rounded-lg">
                            <h4 class="font-medium text-purple-700 mb-2 flex items-center">
                                <i class="fas fa-tachometer-alt mr-2"></i>最少连接
                            </h4>
                            <p class="text-gray-700">将请求分配给当前连接数最少的服务器</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="section-divider my-12"></div>

        <!-- WebSocket处理部分 -->
        <section id="websocket" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
                    <i class="fas fa-plug text-green-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">4. 处理WebSocket请求</h2>
            </div>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden hover-scale">
                <div class="p-6">
                    <h3 class="text-xl font-semibold mb-4 text-green-600 flex items-center">
                        <i class="fas fa-code-branch mr-2"></i>4.1 配置WebSocket请求头
                    </h3>
                    <p class="text-gray-700 mb-4">在处理WebSocket连接时，需要特别配置<code class="bg-gray-100 px-1 py-0.5 rounded text-green-600">Upgrade</code>和<code class="bg-gray-100 px-1 py-0.5 rounded text-green-600">Connection</code>头部。</p>
                    
                    <div class="code-block p-4 text-gray-200">
                        <pre class="overflow-x-auto"><code>server {
    listen 80;
    server_name demo.com;

    location /ws/ {
        proxy_pass http://backend;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}</code></pre>
                    </div>
                    
                    <div class="mt-6 bg-green-50 p-4 rounded-lg">
                        <h4 class="font-medium text-green-700 mb-2 flex items-center">
                            <i class="fas fa-question-circle mr-2"></i>为什么需要这些配置？
                        </h4>
                        <p class="text-gray-700">WebSocket协议通过HTTP升级机制工作。<code class="bg-gray-100 px-1 py-0.5 rounded text-green-600">Upgrade</code>和<code class="bg-gray-100 px-1 py-0.5 rounded text-green-600">Connection</code>头部是协议升级的关键，确保Nginx能正确处理WebSocket连接。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 图表可视化部分 -->
        <section id="mermaid-chart" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 rounded-full bg-pink-100 flex items-center justify-center mr-4">
                    <i class="fas fa-project-diagram text-pink-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">Nginx请求处理流程图</h2>
            </div>
            
            <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 hover-scale">
                <div class="mermaid">
                    graph TD
                    A[客户端请求] --> B[Nginx服务器]
                    B --> C{请求类型判断}
                    C -->|HTTP请求| D[处理请求头]
                    C -->|WebSocket请求| E[处理WebSocket升级]
                    D --> F[负载均衡选择]
                    F --> G[后端服务器1]
                    F --> H[后端服务器2]
                    E --> I[WebSocket后端]
                    G --> J[返回响应]
                    H --> J
                    I --> K[保持长连接]
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-gray-300 py-12">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col items-center">
                <div class="text-xl font-bold text-white mb-4">
                    <i class="fas fa-laptop-code mr-2"></i>技术小馆
                </div>
                <div class="mb-6">
                    <a href="http://www.yuque.com/jtostring" class="hover:text-white transition duration-300">
                        <i class="fas fa-globe mr-2"></i>http://www.yuque.com/jtostring
                    </a>
                </div>
                <div class="text-sm text-gray-500">
                    &copy; 2023 技术小馆. 保留所有权利.
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 初始化Mermaid图表
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```